<template>
	<view class="content">
		<TopBar :indexflag="true" :combakflag="false" :lang="false" :bottom="true" title="订单"
			barstyle="background-color:rgba(0,0,0,0)"></TopBar>
		<u-sticky>
			<view class="tabs">
				<view class="item" v-for="(item,index) in tabs" @click="changeTab(index)">
					<view class="text">{{$t(item.name)}}</view>
					<view :class="tabs_index==index?'line acline':'line'"></view>
				</view>
			</view>
		</u-sticky>

		<view class="order-box">
			<scroll-view scroll-y="true" style="height:100%;" @scrolltolower="scrolldata">
				<u-empty v-if="order_list.length==0" style="padding-top: 200rpx;" mode="order" iconSize="100"
					textSize="14" :text="$t('OrderEmpty')">
				</u-empty>
				<view v-if="order_list.length!=0" class="order-item" v-for="(item,index) in order_list " @click="changeOrder(item)">
					<view class="top-card">
						<view class="left">
							<!-- <view class="shoplogo">
								<u-icon v-if="item.payment_status==1" name="photo" color="#45BC1B" size="28"></u-icon>
									<u-icon v-if="item.payment_status==0" name="red-packet" color="#45BC1B" size="28"></u-icon>
									<u-icon v-if="item.payment_status==1 && item.status==4" name="checkmark-circle" color="#45BC1B" size="28"></u-icon>
									
							</view> -->
							<view class="shoptext">
								<view class="title">{{i18nLocale=='ug'?item.ug_title:item.cn_title}}</view>
								<!-- <view class="distance">距离:2.3km</view> -->
							</view>
						</view>
						<view class="right">
							<view class="type" v-if="item.payment_status==1 && (item.status==0 || item.status==1)">
								{{$t('Distribution')}}
							</view>
							<view class="type" v-if="item.payment_status==1 && item.status==2">{{$t('Processing')}}
							</view>
							<view class="type" v-if="item.payment_status==1 && item.status==4">{{$t('Finish')}}</view>
							<view class="type" v-if="item.payment_status==2">{{$t('Canceled')}}</view>
						</view>
					</view>
					<view class="item-card">
						<view class="left">
							<view class="big-item"  v-for="(big_item,big_index) in item.items " >
								<view class="sub-item" v-for="(sub_item,sub_index) in big_item.content " >
									<image :src="getImgSrc(sub_item.img)" mode=""></image>
									<view class="title">{{i18nLocale=='ug'?sub_item.ug_name:sub_item.cn_name}}</view>
								</view>
							</view>
						</view>
						<view class="right">
							<view class="price">{{item.fee}}</view>
							<view class="number">{{$t('Shops')}} {{$t('Quantity')}} : {{item.items.length}} </view>
						</view>
					</view>
					<view class="button-card">
						<view class="cancel button" v-if="item.type==0">{{$t('Cancel')}}</view>
						<view class="appraise button" v-if="item.status==4 && item.payment_status==1" @click="changeAppraise(index)">
							{{$t('Appraise')}}
						</view>
						<view class="again button" v-if="item.payment_status==0" @click.stop="changePay(item.id)">{{$t('GoPay')}}</view>
					</view>
				</view>
			</scroll-view>
			<Loading :show="tabloadshow" :text="$t('Loading')" style="width:100%;height:100%;position: absolute;" ></Loading>
		</view>
		<Loading :show="loadshow" bgColor=""  iconName="circle" :text="$t('Loading')" ></Loading>
		
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import {
		getorder
	} from '@/api/all.js';

	export default {
		components: {
			TopBar
		},
		data() {
			return {
				tabs: [{
						name: 'AllOrders',
					},
					{
						name: 'PendingPayment',
					},
					// {
					// 	name: 'TobeReviewed',
					// },
					{
						name: 'TagRefund'
					}
				],
				tabs_index: 0,
				order_list: [],
				pageSize: 7,
				page: 1,
				total: 0,
				to: 1,
				tabloadshow:false,
				loadshow: false,

			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		mounted() {
			this.scrolldata();
		},

		methods: {
			getOrder(type) {
				let that = this;
				getorder({
					per_page: that.pageSize,
					page: that.page,
					type: type
				}).then((res) => {
					if (res.code == 200) {
						let data = res.body;
						console.log(data, '+++++')
						that.total = data.total;
						that.to = data.to;
						that.page++;
						let mydata = that.order_list.concat(data.data);
						that.order_list = mydata;
						that.tabloadshow=false;
						that.loadshow = false;
					}

				})
			},
			scrolldata() {
			
				if (this.to != this.total) {
					this.loadshow=true;
					this.getOrder('');
				} else {
					// this.footer_loading = true;
				}
			},
			changeTab(index) {
				this.tabs_index = index;
				this.page = 1;
				this.total = 0;
				this.to = 1;
				this.order_list = [];
				this.tabloadshow=true;
				if (index == 0) {
					this.getOrder('');
				} else if (index == 1) {
					this.getOrder(0);
				} else {
					this.getOrder(3);
				}

			},
			//付款
			changePay(id){
				uni.navigateTo({
					url:'/pages/order/paypage?id='+id
				})
			},
			changeOrder(item){
				console.log(item,'+++')
				if(item.status==0 && item.payment_status==1){
					uni.navigateTo({
						url:'/pages/order/orderdatail?id='+item.id
					})
				}
			
			},
			changeAppraise() {
				uni.navigateTo({
					url: '/pages/order/appraise'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
	}

	.u-sticky {
		top: 0rpx !important;
	}

	.tabs {
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: $uni-color-topic;
		color: #fff;
		padding: 20rpx 0rpx;
		padding-bottom: 35rpx;
		// border-radius: 0rpx 0rpx $uni-border-radius-lg $uni-border-radius-lg;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;

			.text {
				padding-bottom: 20rpx;
				font-size: $uni-font-size-base;
			}

			.line {
				width: 70%;
				padding: 5rpx 0rpx;
				box-sizing: border-box;
				background-color: transparent;
			}

			.acline {
				background-color: #fff;
				border-radius: 20rpx;

			}
		}
	}

	.order-box {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		height: calc(100% - 120rpx);
		// background-color: red;
		overflow: scroll;
		position: relative;

		.order-item {
			width: 100%;
			box-sizing: border-box;
			padding: $uni-spacing-padding-sm;
			border-radius: $uni-border-radius-lg;
			background-color: $uni-bg-color-box;
			margin-bottom: 20rpx;
			box-shadow: $uni-bg-shadow;

			.top-card {
				width: 100%;
				display: flex;
				// align-items: center;
				justify-content: space-between;

				.left {
					width: 70%;
					display: flex;

					.shoplogo {
						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: $uni-border-radius-sm;
						}
					}

					.shoptext {
						width: 80%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						// padding-left: 20rpx;
						padding:10rpx 20rpx; 

						.title {
							color: #000;
							font-size: $uni-font-size-base;
							width: 100%;
							white-space: nowrap;
							/* 不换行 */
							overflow: hidden;
							/* 溢出隐藏 */
							text-overflow: ellipsis;
							/* 超出显示省略号 */

						}

						.distance {
							color: $uni-text-color-grey;
							font-size: $uni-font-size-sm0;
						}
					}
				}

				.right {
					width: 20%;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: $uni-text-color-grey;
				}
			}

			.item-card {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 0rpx;
				box-sizing: border-box;

				.left {
					width: 70%;
					display: flex;
					align-items: center;
				overflow-x: scroll;
					.big-item{
						display: flex;
						align-items: center;
					}
					.sub-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: $uni-font-size-base;
						margin: 0rpx 15rpx;

						image {
							width: 130rpx;
							height: 130rpx;
							border-radius: $uni-border-radius-lg;
							margin-bottom: $uni-spacing-margin-sm;
						}

					}
				}

				.right {
					width: 20%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.price {
						color: #000;
						font-size: $uni-font-size-base;
					}

					.number {
						color: $uni-text-color-grey;
						font-size: $uni-font-size-sm0;
						padding-top: 10rpx;
					}

				}
			}

			.button-card {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-top: 20rpx;

				.button {
					padding: 10rpx 30rpx;
					color: $uni-color-title;
					border: 2rpx solid $uni-border-color;
					border-radius: $uni-border-radius-lg;
					margin-left: 30rpx;
					font-size: $uni-font-size-sm1;
				}

				.again {
					color: $uni-color-topic;
					border: 2rpx solid $uni-color-topic;
				}
			}
		}
	}
</style>